<template>
  <!-- 资源详情 -->
  <div id="container" v-if="article.id != null">
    <el-card style="height: auto;">
      <div style="height: 60px;">
        <h1 class="title">{{ article.title }}</h1>
      </div>

      <div style="height: 50px;">
        <p class="author">
          <el-avatar class="avatar" size="medium"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
          {{ article.author }}
          &nbsp;&nbsp;&nbsp;
          {{ article.createTime| formatTimer }}
          &nbsp;&nbsp;&nbsp;
          【{{ article.categoryName }}】
          &nbsp;&nbsp;&nbsp;
          {{ article.countScan }}人已围观
        </p>
      </div>

      <div class="short-line-box">
        <p class="short-line"><span class="pre">简介</span> {{ article.shortLine }}</p>
      </div>

      <el-divider></el-divider>
      <div class="content" v-html="article.content">
      </div>
    </el-card>
  </div>
  <div v-else>
    <el-card :body-style="{ padding: '10px',margin:'10px',height:'650px' }">
      <el-empty description="暂无数据"></el-empty>
    </el-card>
  </div>
</template>

<script>
import {
    articleDetail
} from '@/api/article'

export default {
    name: 'my-article-detail',
    data () {
        return {
            article: {
                id: null,
                title: null,
                author: null,
                cover: null,
                shortLine: null,
                content: null,
                categoryId: null,
                categoryName: null,
                countScan: null,
                isCarousel: null,
                isOriginal: null,
                isRecommend: null,
                tagIds: null,
                tagNames: null,
                createTime: null,
                updateTime: null,
                version: null,
                status: null
            }
        }
    },
    filters: {
        formatTimer: function (value) {
            let date = new Date(value)
            let year = date.getFullYear()

            let month = date.getMonth() + 1
            month = month < 10 ? '0' + month : month

            let day = date.getDate()
            day = day < 10 ? '0' + day : day

            let hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour

            let minute = date.getMinutes()
            minute = minute < 10 ? '0' + minute : minute

            let second = date.getSeconds()
            second = second < 10 ? '0' + second : second

            console.log(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second)
            return year + '-' + month + '-' + day
        }
    },
    methods: {
        getDetail (articleId) {
            articleDetail({
                id: articleId
            }).then((response) => {
                if (response && response.code === 200) {
                    var data = response.data
                    this.article.id = data.id
                    this.article.title = data.title
                    this.article.author = data.author
                    this.article.cover = data.cover
                    this.article.shortLine = data.shortLine
                    this.article.content = data.content
                    this.article.categoryId = data.categoryId
                    this.article.categoryName = data.categoryName
                    this.article.countScan = data.countScan
                    this.article.isCarousel = data.isCarousel
                    this.article.isRecommend = data.isRecommend
                    this.article.isOriginal = data.isOriginal
                    this.article.tagIds = data.tagIds
                    this.article.tagNames = data.tagNames
                    this.article.version = data.version
                    this.article.createTime = data.createTime
                    this.article.updateTime = data.updateTime
                    this.article.status = data.status
                }
            })
        }
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                var articleId_ = val.query.articleId
                if (articleId_ != null && articleId_ !== '') {
                    this.article.id = articleId_
                    this.getDetail(articleId_)
                }
            },
            // 深度观察监听
            deep: true
        }
    },
    mounted () {

    },
    create () {
        var articleId_ = this.article.id
        if (articleId_ != null && articleId_ !== '') {
            this.getDetail(articleId_)
        }
    }
}
</script>

<style scoped>
#container {
  margin: 0px 0px 10px 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  background-color: beige;
}

.title {
  width: auto;
  height: 60px;
  line-height: 30px;
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  margin: 20px 0px 20px 0px;
  color: #333333;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.author {
  width: auto;
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  margin: 0px 0px 0px 0px;
  color: #999999;
}

.avatar {
  height: 30px;
  width: 30px;
  line-height: 30px;
  border: none;
  vertical-align: middle;
}

.short-line-box {
  min-height: 80px;
  color: #888888;
  border: 1px solid #F3F3F3;
  padding: 10px;
  /* margin: 10px auto 0; */
  line-height: 23px;
  background: none repeat 0 0 #F6F6F6;
}

.short-line {
  text-align: left;
  /* text-indent: 2em; */
  font-size: 16px;
  line-height: 25px;
  /* margin: 20px 0px 30px 0px; */
  color: #888888;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pre {
  font-size: 16px;
  color: #000000;
  font-weight: 600;

}

.content {
  text-align: justify;
  text-indent: 2em;
  font-size: 17px;
  font-weight: 400;
  margin: 0px 0px 50px 0px;
  color: #000;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  line-height: 30px;
}
</style>
